<%--
  Created by IntelliJ IDEA.
  User: 22711
  Date: 2021/10/8
  Time: 18:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热门车型</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <link href="${pageContext.request.contextPath}/dist/layui/css/layui.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/car_rental/hot_car.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet">
    <link href="http://r1nxp2i0y.hn-bkt.clouddn.com/images/ico.png" rel="icon" type="image/x-ico"/>

</head>
<style>
    .top-linkbox{
        line-height: 1.6;
    }
</style>
<body>
<jsp:include page="../message.jsp"/>

<!--=======================================1. 标题================================================-->
<jsp:include page="../util/top.jsp"/>

<!--========================2. 内容 ==================================-->
<div class="main-wrap w1180">
    <!--=======选择时间 两个月之内=====-->
</div>

<div class="car-wrap">
    <!--品牌列表-->
    <div class="brand-box">
        <div class="type-box" id="type-box">
            <span>类 型：</span>
            <a href="javascript:;" class="active">全部</a>
            <a href="javascript:;" class="J_CarLevel">经济型</a>
            <a href="javascript:;" class="J_CarLevel">舒适型</a>
            <a href="javascript:;" class="J_CarLevel">精英型</a>
            <a href="javascript:;" class="J_CarLevel">SUV</a>
            <a href="javascript:;" class="J_CarLevel">5~15座商务</a>
            <a href="javascript:;" class="J_CarLevel">电动型</a>
        </div>
        <div class="brand-box-list">
            <span>品 牌：</span>
            <!--品牌标签页-->

            <div class="tabbox" >
                <div class="tabcon" id="tabbox" style="display: block;">
                    <a bnid="1" href="JavaScript:;" class="active">全部</a>
                    <a bnid="2" href="JavaScript:;" class="J_BrandName">雪佛兰</a>
                    <a bnid="3" href="JavaScript:;" class="J_BrandName">大众</a>
                    <a bnid="4" href="JavaScript:;" class="J_BrandName">本田</a>
                    <a bnid="5" href="JavaScript:;" class="J_BrandName">丰田</a>
                    <a bnid="8" href="JavaScript:;" class="J_BrandName">标致</a>
                    <a bnid="9" href="JavaScript:;" class="J_BrandName">别克</a>
                    <a bnid="14" href="JavaScript:;" class="J_BrandName">宝马</a>
                    <a bnid="27" href="JavaScript:;" class="J_BrandName">大众斯柯达</a>
                    <a bnid="36" href="JavaScript:;" class="J_BrandName">东风</a>
                    <a bnid="40" href="JavaScript:;" class="J_BrandName">荣威</a>
                    <a bnid="45" href="JavaScript:;" class="J_BrandName">路虎</a>
                    <a bnid="59" href="JavaScript:;" class="J_BrandName">MG</a>
                    <a bnid="60" href="JavaScript:;" class="J_BrandName">上汽大通</a>
                    <a bnid="85" href="JavaScript:;" class="J_BrandName">一汽马自达</a>
                    <a bnid="87" href="JavaScript:;" class="J_BrandName">英菲尼迪</a>
                    <a bnid="92" href="JavaScript:;" class="J_BrandName">力帆</a>
                    <a bnid="93" href="JavaScript:;" class="J_BrandName">阿尔法罗密欧</a>
                    <a bnid="118" href="JavaScript:;" class="J_BrandName">欧拉</a>
                    <a bnid="119" href="JavaScript:;" class="J_BrandName">DS</a>
                    <a bnid="120" href="JavaScript:;" class="J_BrandName">观致</a>
                    <a bnid="121" href="JavaScript:;" class="J_BrandName">北京越野</a>
                    <a bnid="122" href="JavaScript:;" class="J_BrandName">R汽车</a>
                    <a bnid="123" href="JavaScript:;" class="J_BrandName">小鹏</a>
                    <a bnid="124" href="JavaScript:;" class="J_BrandName">日产（进口）</a>
                    <a bnid="125" href="JavaScript:;" class="J_BrandName">郑州日产</a>
                    <a bnid="126" href="JavaScript:;" class="J_BrandName">长安凯程</a>
                    <a bnid="127" href="JavaScript:;" class="J_BrandName">广汽埃安</a>
                    <a bnid="128" href="JavaScript:;" class="J_BrandName">威马</a>
                    <a bnid="129" href="JavaScript:;" class="J_BrandName">领克</a>
                    <a bnid="130" href="JavaScript:;" class="J_BrandName">星途</a>
                    <a bnid="131" href="JavaScript:;" class="J_BrandName">瑞风</a>
                    <a bnid="132" href="JavaScript:;" class="J_BrandName">上汽Marvel</a>
                    <a bnid="133" href="JavaScript:;" class="J_BrandName">极狐</a>
                </div>
            </div>
            <!--标签页结束-->
            <!--汽车列表-->
            <div class="car-box">
<%--                <a target="_blank" href="" class="car-list J_car" cid="138" style="" bnid="32" cl="精英型" vtl="0">--%>
<%--                    <em class=""></em>--%>
<%--                    <div class="car-img">--%>

<%--                        <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/hot-car-test-img.jpg" alt="日产天籁" style="display: inline;">--%>
<%--                    </div>--%>
<%--                    <div class="car-des">--%>
<%--                        <span title="日产天籁">日产天籁</span>--%>
<%--                        <i>--%>
<%--                            三厢--%>
<%--                            5座--%>
<%--                            自动--%>
<%--                        </i>--%>
<%--                    </div>--%>
<%--                </a>--%>
<%--                <a target="_blank" href="" class="car-list J_car" cid="138" style="" bnid="32" cl="精英型" vtl="0">--%>
<%--                    <em class=""></em>--%>
<%--                    <div class="car-img">--%>

<%--                        <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/hot-car-test-img.jpg" alt="日产天籁" style="display: inline;">--%>
<%--                    </div>--%>
<%--                    <div class="car-des">--%>
<%--                        <span title="日产天籁">日产天籁</span>--%>
<%--                        <i>--%>
<%--                            三厢--%>
<%--                            5座--%>
<%--                            自动--%>
<%--                        </i>--%>
<%--                    </div>--%>
<%--                </a>--%>
<%--                <a target="_blank" href="" class="car-list J_car" cid="138" style="" bnid="32" cl="精英型" vtl="0">--%>
<%--                    <em class=""></em>--%>
<%--                    <div class="car-img">--%>

<%--                        <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/hot-car-test-img.jpg" alt="日产天籁" style="display: inline;">--%>
<%--                    </div>--%>
<%--                    <div class="car-des">--%>
<%--                        <span title="日产天籁">日产天籁</span>--%>
<%--                        <i>--%>
<%--                            三厢--%>
<%--                            5座--%>
<%--                            自动--%>
<%--                        </i>--%>
<%--                    </div>--%>
<%--                </a>--%>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<div class="footer">
    <div class="footer-box clear_float">
        <div class="footer-left">
            <p>
                <a href="" >关于小橘</a>
                |
                <a href="" >移动客户端</a>
                |
                <a href="" >帮助中心</a>
                |
                <a href="" >建议专区</a>
                |
                <a href="" >联系我们</a>
                |
                <a href="" >友情链接</a>
                | &nbsp;投诉通道：400-821-1608 &nbsp;
            </p>
            <p>
                Copyright © 2007 - 2021 上海小橘信息技术服务有限公司
                <a href="" >ICP证：沪B2-20140130</a>
            </p>
        </div>
        <div class="footer-right">
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_first.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_second.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_third.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_forth.png">
            </a>
        </div>
    </div>
</div>
<%--<script src="${pageContext.request.contextPath}/js/car_rental/select_car.js"></script>--%>
<script src="${pageContext.request.contextPath}/dist/layui/layui.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });

        //国际版
        laydate.render({
            elem: '#test1-1'
            ,lang: 'en'
        });

        //年选择器
        laydate.render({
            elem: '#test2'
            ,type: 'year'
        });

        //年月选择器
        laydate.render({
            elem: '#test3'
            ,type: 'month'
        });

        //时间选择器
        laydate.render({
            elem: '#test4'
            ,type: 'time'
        });

        //日期时间选择器
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
        });

        //日期范围
        laydate.render({
            elem: '#test6'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            ,range: ['#test-startDate-1', '#test-endDate-1']
        });

        //年范围
        laydate.render({
            elem: '#test7'
            ,type: 'year'
            ,range: true
        });

        //年月范围
        laydate.render({
            elem: '#test8'
            ,type: 'month'
            ,range: true
        });

        //时间范围
        laydate.render({
            elem: '#test9'
            ,type: 'time'
            ,range: true
        });

        //日期时间范围
        laydate.render({
            elem: '#test10'
            ,type: 'datetime'
            ,range: true
        });

        //自定义格式
        laydate.render({
            elem: '#test11'
            ,format: 'yyyy年MM月dd日'
        });
        laydate.render({
            elem: '#test12'
            ,format: 'dd/MM/yyyy'
        });
        laydate.render({
            elem: '#test13'
            ,format: 'yyyyMMdd'
        });
        laydate.render({
            elem: '#test14'
            ,type: 'time'
            ,format: 'H点m分'
        });
        laydate.render({
            elem: '#test15'
            ,type: 'month'
            ,range: '~'
            ,format: 'yyyy-MM'
        });
        laydate.render({
            elem: '#test16'
            ,type: 'datetime'
            ,range: '到'
            ,format: 'yyyy年M月d日H时m分s秒'
        });

        //开启公历节日
        laydate.render({
            elem: '#test17'
            ,calendar: true
        });

        //自定义重要日
        laydate.render({
            elem: '#test18'
            ,mark: {
                '0-10-14': '生日'
                ,'0-12-31': '跨年' //每年的日期
                ,'0-0-10': '工资' //每月某天
                ,'0-0-15': '月中'
                ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
                ,'2099-10-14': '呵呵'
            }
            ,done: function(value, date){
                if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
                    layer.msg('这一天是：中国人民抗日战争胜利72周年');
                }
            }
        });

        var minDate = new Date();
        var maxDate = new Date();
        maxDate = maxDate.setDate(maxDate.getDate()+60);
        maxDate = new Date(maxDate)
        console.log("现在时间：" + minDate.toString())

        console.log("60天后：" + maxDate.toString())
        //限定可选日期
        var ins22 = laydate.render({
            elem: '#test-limit1'
            ,min: formatDate(minDate)
            ,max: formatDate(maxDate)
        });

        function formatDate(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            return (y + '-' + m + '-' + d);
        };

        //前后若干天可选，这里以7天为例
        laydate.render({
            elem: '#test-limit2'
            ,min: -7
            ,max: 7
        });

        //限定可选时间
        laydate.render({
            elem: '#test-limit3'
            ,type: 'time'
            ,min: formatTime(new Date())
            ,max: '23:59:59'
            ,btns: ['clear', 'confirm']
        });

        function formatTime(time){
            return time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
        }


        //同时绑定多个
        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });

        //初始赋值
        laydate.render({
            elem: '#test19'
            ,value: '1989-10-14'
            ,isInitValue: true
        });

        //选中后的回调
        laydate.render({
            elem: '#test20'
            ,done: function(value, date){
                layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
        });

        //日期切换的回调
        laydate.render({
            elem: '#test21'
            ,change: function(value, date){
                layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
            }
        });
        //不出现底部栏
        laydate.render({
            elem: '#test22'
            ,showBottom: false
        });

        //只出现确定按钮
        laydate.render({
            elem: '#test23'
            ,btns: ['confirm']
        });

        //自定义事件
        laydate.render({
            elem: '#test24'
            ,trigger: 'mousedown'
        });

        //点我触发
        laydate.render({
            elem: '#test25'
            ,eventElem: '#test25-1'
            ,trigger: 'click'
        });

        //双击我触发
        lay('#test26-1').on('dblclick', function(){
            laydate.render({
                elem: '#test26'
                ,show: true
                ,closeStop: '#test26-1'
            });
        });

        //日期只读
        laydate.render({
            elem: '#test27'
            ,trigger: 'click'
        });

        //非input元素
        laydate.render({
            elem: '#test28'
        });

        //墨绿主题
        laydate.render({
            elem: '#test29'
            ,theme: 'molv'
        });

        //自定义颜色
        laydate.render({
            elem: '#test30'
            ,theme: '#393D49'
        });

        //格子主题
        laydate.render({
            elem: '#test31'
            ,theme: 'grid'
        });


        //直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            ,position: 'static'
        });
        laydate.render({
            elem: '#test-n2'
            ,position: 'static'
            ,lang: 'en'
        });
        laydate.render({
            elem: '#test-n3'
            ,type: 'month'
            ,position: 'static'
        });
        laydate.render({
            elem: '#test-n4'
            ,type: 'time'
            ,position: 'static'
        });
    });
</script>
<script>
    showCarList("全部","全部");
    var globalCarType;
    var globalCarBrand;
    var globalOrderBy;
    function showCarList(carType, carBrand){
        globalCarType = carType;
        globalCarBrand = carBrand;
        if(carType == "全部")
            carType = "-1";
        if(carBrand == "全部")
            carBrand = "-1";
    var url = '${pageContext.request.contextPath}/hotcar/' + carType + '/'
        + carBrand;
    $.get(
        url,null,function (result) {
            // console.log("分页查询的数据是：" + result);
            console.log("分页查询的数据是JSON：" + JSON.stringify(result));

            $(".car-box").html("");
            console.log(JSON.stringify(result));
            if(result.code == 200){
                var carArray = result.data;
                for(var i = 0;i<carArray.length;i++){
                    var carId = carArray[i].carId;
                    var carName = carArray[i].carName;
                    var carSeatNum=carArray[i].carSeatNumber;
                    var carImagePath = carArray[i].carImagePath;
                    var carShiftType = carArray[i].carShiftType;
                    var liEle ='<a target="_blank" href="${pageContext.request.contextPath}/car/'+carId+'/store" class="car-list J_car" cid="138" style="" bnid="32" cl="精英型" vtl="0">\n' +
                        '                    <em class=""></em>\n' +
                        '                    <div class="car-img">\n' +
                        '\n' +
                        '                        <img src="' + carImagePath + '" alt="'+carName+'" style="display: inline;">\n' +
                        '                    </div>\n' +
                        '                    <div class="car-des">\n' +
                        '                        <span title="日产天籁">'+carName+'</span>\n' +
                        '                        <i>\n' +
                        '                            '+carSeatNum+'\n' +
                        '                           '+carShiftType+' \n' +
                        '                        </i>\n' +
                        '                    </div>\n' +
                        '                </a>'
                    $(".car-box").append(liEle);
                }
                }
            }
    )}

    var chooseCar = document.getElementById('type-box').getElementsByTagName('a');
    var chooseBrandA = document.getElementById('tabbox').getElementsByTagName('a');
    var oChooseCar = document.getElementById("type-box");
    var oChooseBrand = document.getElementById("tabbox");


    for(var i = 0; i < chooseCar.length;i++){
        chooseCar[i].onclick = function(){
            var siblings = this.parentElement.children;
            for(var j=0;j<siblings.length;j++){
                siblings[j].className = '';
            }
            this.className = 'active';
            if(this.parentNode == oChooseCar ){
                getResult();
            }
        }
    }




    for(var i = 0; i < chooseBrandA.length;i++){
        chooseBrandA[i].onclick = function(){
            var siblings = this.parentElement.children;
            for(var j=0;j<siblings.length;j++){
                siblings[j].className = '';
            }
            this.className = 'active';
            if(  this.parentNode == oChooseBrand   ){
                getResult();
            }
        }
    }

    function getResult() {
        var o1 = 0, o2 = 0;

        for (var i = 0; i < chooseCar.length; i++) {
            if (chooseCar[i].className == 'active') {
                o1 = i;
            }
        }
        for (var i = 0; i < chooseBrandA.length; i++) {
            if (chooseBrandA[i].className == 'active') {
                o2 = i;
            }

        }

        var carType = chooseCar[o1].text;
        var carBrand = chooseBrandA[o2].text;


        console.log(carType);
        console.log(carBrand);


        console.log("chooseCar[o1]：" + chooseCar[o1].text);
        console.log("chooseBrandA[o2]：" + chooseBrandA[o2].text);

        showCarList(carType, carBrand)

    }
</script>
</body>
</html>